<template>
    <div class="app-container">
        <div class="echart">
            <div class="top">
                <div ref="physicalTestChart"   class="physicalTestChart">左</div>
                <div  ref="averageChart"   class="averageChart">右</div>
            </div>
            <div class="bottom">
                <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
                   <el-form-item label="园所性质" prop="type">
                     <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
                       <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                     </el-select>
                   </el-form-item>
                   <el-form-item label="地区类型" prop="nature">
                     <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                       <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                     </el-select>
                   </el-form-item>
                   <el-form-item>
                     <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                   </el-form-item>
                </el-form>
                <div ref="schoolTestChart"   class="schoolTestChart">左</div>
            </div>
        </div>
    </div>
</template>
<script>
  import { selectSemster} from "@/api/base/semster";
  import moment from "moment";
 export default {
   name: "ysgyxx",
   data() {
     return {
          // 查询参数
          queryParams: {
            nature:'',
            type:'',
          },
          schoolNatureOptions:[],
          schoolTypeOptions:[],
           physicalTestChart:null,
           physicalTestList:[
              {name:'优秀',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
              {name:'及格',run:40,longJump:30,sitReach:10,beamn:40,jump:10},
              {name:'不及格',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
           ],
           legendSelected:{
                '10m*往返跑':true,
                '跳远':false,
                '坐位体前屈':false,
                '平衡木':false,
                '双脚跳远':false,
           },
           averageChart:null,
           averageList: [5, 4.8, 4.7, 4.7, 4.9],
           schoolTestChart:null,
           schoolTestList:[
                {name:'幼儿园1',run:5,longJump:4.7,sitReach:5,beamn:4.8,jump:4.9},
                {name:'幼儿园3',run:5,longJump:4.7,sitReach:5,beamn:4.8,jump:4.9},
                {name:'幼儿园2',run:5,longJump:4.7,sitReach:5,beamn:4.8,jump:4.9},
                {name:'幼儿园4',run:5,longJump:4.7,sitReach:5,beamn:4.8,jump:4.9},
                {name:'幼儿园5',run:5,longJump:4.7,sitReach:5,beamn:4.8,jump:4.9},
           ]
        }
   },
   created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });

   },
   mounted(){
        // this.getList()
        this.physicalTestChart = this.$echarts.init(this.$refs.physicalTestChart);
        this.averageChart = this.$echarts.init(this.$refs.averageChart);
        this.schoolTestChart = this.$echarts.init(this.$refs.schoolTestChart);
        this.physicalTestChartFun();
        this.averageChartFn();
        this.schoolTestChartFn()
   },
   methods: {
    handleQuery(){

    },
    resetQuery(){

    },
    physicalTestChartFun(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '体测成绩评价分布图',
          //  subtext: '纯属虚构',
           left: 'left'
         },

         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.physicalTestList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '10m*往返跑',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.physicalTestList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.physicalTestList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.physicalTestList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.physicalTestList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.physicalTestList.map(item=>item.jump),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.physicalTestChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },

    averageChartFn(){
        const option = {
           title: {
             text: '各项目体测平均分统计'
           },
           legend: {
            //  data: ['Allocated Budget', 'Actual Spending']
           },
           radar: {
             // shape: 'circle',
             indicator: [
               { name: '10m*往返跑', max: 5 },
               { name: '跳远', max: 5 },
               { name: '坐位体前屈', max: 5 },
               { name: '平衡木', max: 5 },
               { name: '双脚跳远', max: 5 },
             ]
           },
           series: [
             {
               name: 'Budget vs spending',
               type: 'radar',
               data: [
                 {
                   value: this.averageList,
                //    name: 'Allocated Budget'
                 },
               ]
             }
           ]
          };
             // 使用刚指定的配置项和数据显示图表
          this.averageChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
    schoolTestChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '园所体测成绩情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },

         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          dataZoom:{
           bottom:0,
           show:12/this.schoolTestList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.schoolTestList.length*100
         },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.schoolTestList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2ec7c9','#5ab1ef'],
          series: [
              {
                  name: '10m*往返跑',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolTestList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolTestList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.jump),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.schoolTestChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
       //地图监听窗口缩放事件
     monitorResize(){
      this.physicalTestChart.resize();
      this.averageChart.resize();
      this.schoolTestChart.resize();
    },
   }
 };
</script>
<style lang="scss" scoped>
 .echart{
    width: 100%;
    height:1000px;
    .top{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 45%;
        .physicalTestChart{
            width: 45%;
            height: 100%;
        }
        .averageChart{
            width: 45%;
            height: 100%;
        }
    }
    .bottom{
        margin-top: 50px;
        width: 100%;
        height: 50%;
        .schoolTestChart{
            margin-top: 10px;
            width: 95%;
            height:90%;
        }
    }
 }
</style>
